<div class="main">
  <div class="left">
    <form nz-form nzLayout="vertical" #f="ngForm" (submit)="save()" se-container="1">
      <se label="用户名">
        <span style="margin-left: 8px">{{ user.username }}</span>
      </se>
      <se label="角色">
        <nz-tag nzColor="blue" *ngFor="let role of user.roles"> {{ role.name }}</nz-tag>
      </se>
      <se label="姓名" error="请输入您的姓名!">
        <input nz-input [(ngModel)]="user.name" name="name" required />
      </se>
      <se label="性别">
        <nz-select nzShowSearch nzAllowClear [(ngModel)]="user.sex" name="sex">
          <nz-option [nzLabel]="i.label" [nzValue]="i.value" *ngFor="let i of sexOptions"></nz-option>
        </nz-select>
      </se>
      <se label="手机号" error="请输入您的手机号!">
        <input nz-input [(ngModel)]="user.phone" name="phone" required />
      </se>
      <se>
        <button nz-button nzType="primary" [disabled]="f.invalid">更新基本信息</button>
      </se>
    </form>
  </div>
  <div class="right">
    <div class="avatar_title">头像</div>
    <div class="avatar"><img src="{{ user.avatar }}" alt="Avatar" /></div>
    <nz-upload
      nzAction="/sys/file/upload"
      [nzShowUploadList]="false"
      [(nzFileList)]="avatar"
      [nzData]="{ formatType: 'Object' }"
      (nzChange)="avatarChange($event)"
    >
      <button nz-button class="button_view">
        <i nz-icon nzType="upload"></i>
        <span>更换头像</span>
      </button>
    </nz-upload>
  </div>
</div>
